import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Route, withRouter, Redirect } from 'react-router-dom';
import { Tools, Flex, List, Checkbox, SearchBar, WingBlank, Button, WhiteSpace, Switch } from 'weaver-mobile';
import QueueAnim from 'rc-queue-anim';
import RemindType from "../home/remindType";
import Sublist from "../sublist"

const CheckboxItem = Checkbox.CheckboxItem;
const Item = List.Item;
const getLabel = Tools.getLabel;

@withRouter
@inject('homeStore')
@observer
export default class ConfigList extends React.Component {
  static defaultProps = {
    prefixCls: 'msg-setting-home',
  }


  batchSet(name, value) {
    const { homeStore } = this.props;
    homeStore.userMsgConfig = homeStore.userMsgConfig.map(item => {
      if (item.subList) {
        item.subList = item.subList.map(subItem => ({
          ...subItem,
          [name]: {
            ...subItem[name],
            value: value.target.checked ? "1" : "0"
          }
        }))
      }
      let setOpenRight = {
        ...item.openRight,
      }
      if (name === 'open') {
        setOpenRight = {
          ...item.openRight,
          value: !value.target.checked && '0'
        }
      }
      if (name === 'openRight' && item.open.value == "1") {
        setOpenRight = {
          ...item.openRight,
          value: value.target.checked ? '1' : '0'
        }
      }
      return ({
        ...item,
        [name]: {
          ...item[name],
          value: value.target.checked ? "1" : "0"
        },
        openRight: {
          ...setOpenRight,
        }
      })
    })
  }

  setOpen(name, value, index) {
    const { homeStore } = this.props;
    // homeStore.userMsgConfig[index][name].value = value ? "1" : "0";
    homeStore.userMsgConfig[index] = {
      ...homeStore.userMsgConfig[index],
      [name]: {
        ...homeStore.userMsgConfig[index][name],
        value: value ? "1" : "0"
      }
    }
    if (name == 'open' && homeStore.userMsgConfig[index][name].value == '0') {
      homeStore.userMsgConfig[index]['openRight'].value = '0';
    }
    if (homeStore.userMsgConfig[index].subList) {
      let subList = homeStore.userMsgConfig[index].subList;
      subList = subList.map(item => {
        if (name == 'open' && !value) {
          console.log(item.openRight)
          return ({
            ...item,
            [name]: {
              ...item[name],
              value: value ? "1" : "0"
            },
            openRight: {
              ...item['openRight'],
              value: "0"
            }
          })
        } else {
          return ({
            ...item,
            [name]: {
              ...item[name],
              value: value ? "1" : "0"
            }
          })

        }
      })
      homeStore.userMsgConfig[index].subList = subList;
    }
  }

  listItemClick(item, index) {
    const { homeStore, history } = this.props;
    const { sublistSelectPage, detailSetting } = homeStore;
    // if (item.subList && item.open.value === "1") {
    history.push(`/home/sublist`);
    detailSetting.list = item;
    detailSetting.index = index;
    detailSetting.title = item.title;
    detailSetting.list.subList = detailSetting.list.subList.map(item => ({ ...item, hide: false }));
    sublistSelectPage.options = item.subList.map((item, index) => ({
      disabled: false,
      key: index,
      selected: false,
      showname: item.title,
      visible: true
    }));
    sublistSelectPage.selectedKeys = [];
    sublistSelectPage.searchText = "";
    // }
  }

  render() {
    const { homeStore, prefixCls, history } = this.props;
    const { selectPage, userMsgConfig, sublistSelectPage, detailSetting } = homeStore;
    let checkedOpen = userMsgConfig.every(item => Number(item.open.value));
    let checkedOpenRight = userMsgConfig.filter(item => item.open.value === "1").every(item => Number(item.openRight.value));
    let openRightCheckbox = userMsgConfig.every(item => item.open.value === "0");
    return (
      <React.Fragment>
        <Route
          key="homeRemindType"
          path="/home/remindType"
          breadcrumbName=""
          render={() => (
            <QueueAnim>
              <div className="wm-route-layout">
                <RemindType storeType={selectPage} />
              </div>
            </QueueAnim>
          )}
        />
        <Route
          key="homeSubList"
          path="/home/sublist"
          breadcrumbName=""
          render={() => (
            <QueueAnim>
              <div className="wm-route-layout">
                <Sublist />
              </div>
            </QueueAnim>
          )}
        />
        <div className={`${prefixCls}-modal`} style={{ paddingBottom: 151 }}>
          <div className={`${prefixCls}-topSearchBar`} onClick={() => history.push(`/home/remindType`)}>
            <SearchBar
              className="search-select"
              placeholder={getLabel("523335", "请输入提醒种类名称")}
              showSelectButton
              selectText={getLabel("388219", "提醒种类")}
            />
          </div>
          <List className={`${prefixCls}-batch-checkbox`}>
            <Flex>
              <Flex.Item style={{ flex: "4" }}>
                <CheckboxItem
                  checked={checkedOpen}
                  onChange={this.batchSet.bind(this, 'open')}>
                  {getLabel("20839", "批量")}{getLabel("26472", "启用")}
                </CheckboxItem>
              </Flex.Item>
              <Flex.Item style={{ flex: "6" }}>
                <CheckboxItem
                  disabled={openRightCheckbox}
                  checked={checkedOpenRight}
                  onChange={this.batchSet.bind(this, 'openRight')}>
                  {getLabel("523838", "批量启用PC右下角提醒")}
                </CheckboxItem>
              </Flex.Item>
            </Flex>
          </List>
          <div className={`${prefixCls}-modal-content`} style={{ background: "#F3F7FE" }}>
            {userMsgConfig.map((item, index) => {
              return (
                <div key={item.key}>
                  <List className={`${prefixCls}-home`}>
                    <Item
                      arrow={item.subList ? "horizontal" : ""}
                      onClick={this.listItemClick.bind(this, item, index)}>{item.title}
                    </Item>
                    <Item
                      extra={<Switch
                        checked={Number(item.open.value)}
                        onClick={(checked) => {
                          this.setOpen('open', checked, index);
                        }}
                      />}>
                      <span className="smallFont">
                        {getLabel("26472", "启用")}
                      </span>
                    </Item>
                    <Item
                      extra={<Switch
                        disabled={!Number(item.open.value)}
                        checked={Number(item.openRight.value) && Number(item.open.value)}
                        onClick={(checked) => {
                          this.setOpen('openRight', checked, index);
                        }}
                      />}>
                      <span className="smallFont">
                        {getLabel("523837", "启用PC右下角提醒")}
                      </span>
                    </Item>
                  </List>
                  <WhiteSpace size="sm" />
                </div>
              )
            })}
          </div>
          <Button type="primary" className=""
            onClick={() => {
              homeStore.saveUserMsgConfig();
            }}
          >{getLabel("30986", "保存")}</Button>
        </div>
      </React.Fragment>
    )
  }
}
